<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .clock {
            width: 600px;
            height: 600px;
            margin: 100px auto;
            background: url(images/clock.jpg) no-repeat;
            position: relative;
        }

        .clock div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url(images/hour.png) no-repeat center center;
        }

        #m {
            background-image: url(images/minute.png);
        }

        #s {
            background-image: url(images/second.png);
        }
    </style>
</head>
<body>
<div class="clock">
    <div id="h"></div>
    <div id="m"></div>
    <div id="s"></div>
</div>
<!--javascript-->
<script>
    window.onload = function(){
        function $( element ){
            return document.getElementById( element );
        }
        var hh = $('h'); //小时
        var mm = $('m'); //分
        var ss = $('s'); //秒
        setInterval(lock,10);
        function lock(){
            var d = new Date(); //console.log( d );
            /********************************************************/
            //秒事件
            var ms = d.getMilliseconds();//毫秒
            var s = d.getSeconds() + ms / 1000;
            ss.style.transform = 'rotate('+ s*6 +'deg)';


            /********************************************************/
            //分事件
            var m = d.getMinutes() + s / 60;
            mm.style.transform = 'rotate('+ m*6 +'deg)';


            /********************************************************/
            //小时事件
            var h = d.getHours() + m / 60;
            hh.style.transform = 'rotate('+ h*30 +'deg)';


        }


    }


</script>

</body>
</html>